/*
  用法：
    <yl-dropdown class="menu-top" list="{{array}}" valueKey="content" title="请选择内容" popup-top="88" bind:click="clickFunc" bind:open="openFunc"></yl-dropdown>
  Props
    list                  数据源
    value-key             要显示内容对应的key
    title                 menu的标题
    close-click-overlay   是否在点击遮罩层后关闭
    is-custom-cell        是否自定义cell
    popup-top             pop弹出层距离顶部的距离，默认88rpx
  Events
    open                  打开
    close                 关闭
    click-overlay         点击背景遮罩层触发
  Slot
    -                     自定义下拉弹出的cell
  外部样式类
    无
*/
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 数据源
    list: {
      type: Array,
      value: [],
    },
    // 数据源中每项的key
    valueKey: {
      type: String,
      value: "",
    },
    // menu标题
    title: {
      type: String,
    },
    // 是否在点击遮罩层后关闭
    closeClickOverlay: {
      type: Boolean,
      value: true,
    },
    // 是否自定义cell
    isCustomCell: {
      type: Boolean,
      value: false,
    },
    // pop弹出层距离顶部的距离，默认88rpx
    popupTop: {
      type: Number,
      value: 88,
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    selectedImage:
      "",
    normalImage:
      "",
    isSelected: false,
  },
  lifetimes: {
    // 加载成功之后先初始化数据
    attached: function () {},
    detached: function () {},
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //点击遮罩层
    clickOverlay() {
      this.setData({
        isSelected: !this.data.isSelected,
      });
      this.triggerEvent("close", this);
    },
    // 点击menu按钮
    clickMenu() {
      this.setData({
        isSelected: !this.data.isSelected,
      });
      if (this.data.isSelected) {
        this.triggerEvent("open", this);
      } else {
        this.triggerEvent("close", this);
      }
    },
    // 点击cell
    onClickItem(e) {
      let selectedItem = this.data.list[e.target.dataset.index];
      let titleTemp = this.data.valueKey
        ? selectedItem[this.data.valueKey]
        : selectedItem;
      this.setData({
        title: titleTemp,
        isSelected: false,
      });
      this.triggerEvent("click", selectedItem);
    },
  },
});
